<template>
	<scroll-view class="wpprs" scroll-y>
		<view class="top">
			<image :src="productDtl.productImg"></image>
			<view class="btnbox">
				<view>
					仪器状态：
					<text>{{ serialList[productDtl.status] }}</text>
				</view>
			</view>
		</view>
		<view class="info">
			<view>
				<image src="../../static/images/iconMachineInfo.png"></image>
				机器信息
			</view>
			<view>
				<view class="l">品牌：</view>
				<view class="r">{{ productDtl.brand }}</view>
			</view>
			<view>
				<view class="l">类别：</view>
				<view class="r">{{ productDtl.category }}</view>
			</view>
			<view>
				<view class="l">名称：</view>
				<view class="r">{{ productDtl.name }}</view>
			</view>
			<view>
				<view class="l">SKU：</view>
				<view class="r">{{ productDtl.skuCode }}</view>
			</view>
			<view>
				<view class="l">SN：</view>
				<view class="r">{{ productDtl.serial }}</view>
			</view>
			<view>
				<view class="l">固定资产编码：</view>
				<view class="r">{{ productDtl.assetCode }}</view>
			</view>
			<view>
				<view class="l">是否有验证</view>
				<view class="r">{{ verifyList[productDtl.verify] }}</view>
			</view>
		</view>
		<view class="info" v-if="!flag">
			<view>
				<view class="l">是否有验证：</view>
				<view class="r"><uni-data-select v-model="productDtl.verify" :localdata="range"></uni-data-select></view>
			</view>
			<view>
				<view class="l">维保类型：</view>
				<view class="r">{{ originalWarrantyTypeList[productDtl.originalWarrantyType] }}</view>
			</view>
			<view>
				<view class="l">维保起始：</view>
				<view class="r"><uni-dateformat :date="productDtl.warrantyStartDate"></uni-dateformat></view>
			</view>
			<view>
				<view class="l">维保终止：</view>
				<view class="r"><uni-dateformat :date="productDtl.warrantyEndDate"></uni-dateformat></view>
			</view>
			<view>
				<view class="l">所属实验室：</view>
				<view class="r" @click="opensels">{{ getLaboratoryName(productDtl.laboratoryDTO.id) }}{{ '>' }}</view>
			</view>
		</view>
		<view class="dataDTOList" v-if="flag">
			<view>
				<image src="../../static/images/iconAttachment.png"></image>
				附件
			</view>
			<view v-for="(item, idx) in productDtl.dataDTOList" :key="idx" @click="toViewFile(item.resource)">
				<view class="l">{{ item.name }}</view>
				<view class="r">{{ '>' }}</view>
			</view>
		</view>
		<view class="info" v-if="flag">
			<view>
				<image src="../../static/images/iconMaintenance.png"></image>
				维保信息
				<!-- <text>维保记录{{'>'}}
				</text> -->
			</view>
			<view>
				<view class="l">维保起始：</view>
				<view class="r">{{ productDtl.warrantyStartDate }}</view>
			</view>
			<view>
				<view class="l">维保终止：</view>
				<view class="r">{{ productDtl.warrantyEndDate }}</view>
			</view>
			<view>
				<view class="l">维保类型：</view>
				<view class="r">{{ originalWarrantyTypeList[productDtl.originalWarrantyType] }}</view>
			</view>
			<view>
				<view class="l">维保状态：</view>
				<view class="r">{{ warrantyStatusList[productDtl.warrantyStatus] }}</view>
			</view>
		</view>
		<view class="info" v-if="flag">
			<view>
				<image src="../../static/images/iconAscription.png"></image>
				归属信息
			</view>
			<view>
				<view class="l">所属公司：</view>
				<view class="r">{{ productDtl.companyName }}</view>
			</view>
			<view>
				<view class="l">实验室：</view>
				<view class="r">{{ productDtl.laboratoryDTO.name }}</view>
			</view>
			<view>
				<view class="l">实验室位置：</view>
				<view class="r">{{ productDtl.laboratoryDTO.address }}</view>
			</view>
			<view>
				<view class="l">实验室负责人：</view>
				<view class="r">{{ productDtl.laboratoryDTO.adminName }}</view>
			</view>
		</view>
		<view class="botbtnbox" v-if="flag">
			<view class="icon" @click="punchtheclock(productDtl.id, 3, '巡检')">
				<image src="../../static/images/iconInspection.png"></image>
				<view>巡检</view>
			</view>
			<view class="icon" @click="reportforrepair">
				<image src="../../static/images/iconFix.png"></image>
				<view>报修</view>
			</view>
			<view class="icon" @click="punchtheclock(productDtl.id, 2, '维修')">
				<image src="../../static/images/iconFixed.png"></image>
				<view>维修</view>
			</view>
			<view class="btn" @click="flag = !flag">修改仪器信息</view>
		</view>
		<view class="sunmit" v-if="!flag" @click="productEngineer">确定</view>

		<uni-drawer ref="showRight" mode="right" :mask-click="false">
			<view class="piding">
				<uni-search-bar v-model="searchValue"></uni-search-bar>
				<scroll-view class="scroll" scroll-y>
					<!-- <view class="list" v-for="(item,idx) in laboratoryList" :key="idx">{{item.name}}</view> -->

					<radio-group @change="radioChange">
						<label class="list" v-for="(item, idx) in laboratoryList" :key="idx" v-if="getsearchValue(item)">
							<radio :value="item.id" />
							<view>{{ item.name }}</view>
						</label>
					</radio-group>
				</scroll-view>
				<view class="sunlies l" @click="quxiao">取消</view>
				<view class="sunlies" v-if="detailvalue" @click="(productDtl.laboratoryDTO.id = detailvalue), quxiao()">确定</view>
			</view>
		</uni-drawer>

		<!-- <view class="baoxiubtn">
			报修
		</view> -->
	</scroll-view>
</template>

<script>
import { productDtl, laboratoryList, productEngineer } from '../../api/order.js';
export default {
	data() {
		return {
			flag: true,
			laboratoryList: [],
			searchValue: '',
			instrumentId: '',
			productDtl: '',
			detailvalue: null,
			range: [
				{
					value: 1,
					text: '硬件IQ/QQ'
				},
				{
					value: 2,
					text: '硬/软件IQ/QQ'
				},
				{
					value: 3,
					text: '否'
				}
			],
			verifyList: ['', '硬件IQ/QQ', '硬/软件IQ/QQ', '否'],
			//1:全保,2:经济型,3:校验服务,4:QQ/PM
			originalWarrantyTypeList: ['', '全保', '经济型', '校验服务', 'QQ/PM'],
			//维保状态；1：维保中，2：即将到期，3：已过保
			warrantyStatusList: ['', '维保中', '即将到期', '已过保'],
			serialList: [
				//仪器状态;1:待安装,2:正常运行,3:维修中,4:报废
				'',
				'待安装',
				'正常运行',
				'维修中',
				'报废'
			]
		};
	},
	onLoad(e) {
		this.instrumentId = e.id;
		productDtl({ id: this.instrumentId }).then((data) => {
			this.productDtl = data.content;
		});
		let _this = this;
		uni.getStorage({
			key: 'laboratoryList',
			success(val) {
				if (new Date().getTime() - 3600000 < val.date) {
					_this.laboratoryList = val.list;
				} else {
					_this.getLaboratoryList();
				}
			},
			fail() {
				_this.getLaboratoryList();
			}
		});
	},
	watch: {
		searchValue() {
			// console.log(this.searchValue)
		}
	},
	methods: {
		baoxiu() {
			uni.navigateTo({
				url: `/pages/reportforrepair/reportforrepair`
			});
		},
		punchtheclock(id, type, name) {
			uni.navigateTo({
				url: `/pages/Instrumentdetails/punchtheclock/punchtheclock?id=${id}&type=${type}&name=${name}`
			});
		},
		reportforrepair() {
			uni.navigateTo({
				url: `/pages/reportforrepair/reportforrepair?id=${this.productDtl.id}`
			});
		},
		productEngineer() {
			productEngineer(this.productDtl).then((data) => {
				this.flag = !this.flag;
			});
		},
		getsearchValue(val) {
			return JSON.stringify(val).indexOf(this.searchValue) != -1;
		},
		radioChange(val) {
			this.detailvalue = val.detail.value;
		},
		quxiao() {
			this.$refs.showRight.close();
			this.detailvalue = null;
		},
		opensels() {
			this.$refs.showRight.open();
		},
		getLaboratoryName(val) {
			let name = '';
			this.laboratoryList.forEach((data) => {
				if (val == data.id) {
					name = data.name;
				}
			});
			return name;
		},
		getLaboratoryList() {
			laboratoryList().then((data) => {
				this.laboratoryList = data.content.list;
				uni.setStorage({
					key: 'laboratoryList',
					data: {
						list: data.content.list,
						date: new Date().getTime()
					}
				});
			});
		},
		toViewFile(item) {
			let fileUrl = JSON.parse(item)[0].url;
			uni.showLoading({
				title: '正在加载'
			});
			uni.downloadFile({
				url: fileUrl,
				success: function (res) {
					var filePath = res.tempFilePath;
					uni.openDocument({
						filePath: filePath,
						showMenu: true,
						success: function (res) {
							console.log('打开文档成功');
							uni.hideLoading();
						}
					});
				}
			});
			// uni.navigateTo({
			//     url: '/pages/webViewpdf/webViewpdf?fileUrl='+ encodeURIComponent(fileUrl)
			// });
		}
	}
};
</script>

<style lang="less" scoped>
.wpprs {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	background-image: url('https://junminyiqi.oss-cn-shanghai.aliyuncs.com/flies/d29eccf2-f7be-dbc8-4853-e3b19055825b.png');
	background-repeat: no-repeat;
	background-size: 100%;
	padding: 30upx 30upx 150upx 30upx;
	box-sizing: border-box;
	background-color: #f1f1f1;
	.baoxiubtn {
		background-color: red;
		color: #fff;
		text-align: center;
		margin: 20upx;
		padding: 15upx;
		border-radius: 60upx;
	}
	.piding {
		padding: 30upx;
		height: 100%;
		box-sizing: border-box;
		.scroll {
			height: calc(100% - 240upx);
			padding: 30upx 0;
			.list {
				padding: 20upx 0;
				display: flex;
			}
		}
		.sunlies {
			text-align: center;
			padding: 10upx;
			color: #fff;
			background-color: red;
			border-radius: 80upx;
			display: inline-block;
			box-sizing: border-box;
			width: 50%;
		}
		.sunlies.l {
			background-color: #fff;
			border: 1px #ccc solid;
			box-sizing: border-box;
			display: inline-block;
			color: #000;
			width: 50%;
		}
	}
	.sunmit {
		padding: 20upx;
		text-align: center;
		color: #fff;
		background-color: red;
		border-radius: 120upx;
		margin-top: 30upx;
	}
	.top {
		padding: 30upx;
		background-color: #fff;
		border-radius: 10upx;
		image {
			width: 100%;
			height: 450upx;
		}
		.btnbox {
			text-align: right;
			view {
				background-color: #f1f1f1;
				padding: 10upx 20upx;
				border-radius: 50upx;
				display: inline-block;
				line-height: 1;
				text {
					color: blue;
				}
			}
		}
	}
	.info {
		background-color: #fff;
		border-radius: 10upx;
		padding: 30upx;
		margin-top: 30upx;
		& > view {
			display: flex;
			padding: 10upx 0;
			position: relative;
			text {
				color: blue;
				position: absolute;
				right: 0;
				top: 0;
			}
			.l {
				width: 350upx;
			}
			.r {
				width: 100%;
				text-align: right;
				/deep/.uni-stat__select {
					transform: translateY(-10upx);
				}
				/deep/.uni-select {
					border: none;
				}
				/deep/.uni-select__input-placeholder {
					color: #000;
					font-size: 32upx;
				}
			}
		}
		image {
			width: 30upx;
			height: 30upx;
			margin-right: 30upx;
			transform: translateY(6upx);
		}
	}
	.dataDTOList {
		background-color: #fff;
		border-radius: 10upx;
		padding: 30upx;
		margin-top: 30upx;
		& > view {
			display: flex;
			padding: 10upx 0;
			.l {
				width: 100%;
			}
			.r {
				height: 80upx;
				text-align: right;
			}
		}
		image {
			width: 30upx;
			height: 30upx;
			margin-right: 30upx;
			transform: translateY(6upx);
		}
	}
	.botbtnbox {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		width: 100%;
		padding: 30upx;
		.icon {
			padding: 0 46upx;
			text-align: center;
			font-size: 22upx;
			image {
				width: 40upx;
				height: 40upx;
			}
		}
		.btn {
			// width: 360upx;
			background-color: red;
			text-align: center;
			color: #fff;
			padding: 10upx 40upx;
			border-radius: 80upx;
			height: 46upx;
		}
	}
}
</style>
